<template>
  <view class="page custom-page">
    <custom-head gradient back title="添加学生"> </custom-head>
    <view class="addition">
      <view class="touxiang-box flex col a-center j-c-c">
        <u-upload 
          max-count="1"  
          width="150rpx" 
          height="150rpx"
          :file-list="fileList"
          :form-data="{ type: 'avatar' }"
          :header="{ Authorization: token }"
          :action="BASE_URL + '/file/upload'"
          @on-change="onSuccess"
          @on-remove="omRemove"
          >
          <view class="touxiang" slot="addBtn">
            <image src="../../static/img/avatar.png" mode="widthFix"></image>
          </view>
        </u-upload>
        <text>头像</text>
      </view>

      <view class="form">
        <u-form :model="form" ref="uForm" label-width="156">
          <u-form-item label="姓名">
            <u-input v-model="form.name" placeholder="请输入学生姓名（昵称)16个字符内" />
          </u-form-item>
          <u-form-item label="性别">
            <u-radio-group v-model="form.sex">
              <u-radio v-for="(item, index) in sexList" :key="index" :name="item.name">{{ item.name }}</u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="学生状态">
            <u-radio-group v-model="form.status">
              <u-radio v-for="(item, index) in stateList" :key="index" :name="item.name">{{ item.name }}</u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="学号">
            <u-input v-model="form.student_number" placeholder="请输入学号" />
          </u-form-item>
          <u-form-item label="初始积分">
            <u-input v-model="form.integration" placeholder="请输入初始积分" />
          </u-form-item>
          <u-form-item label="家长昵称">
            <u-input v-model="form.emergency_contact" placeholder="请输入家长（紧急联系人）昵称" />
          </u-form-item>
          <u-form-item label="联系电话">
            <u-input v-model="form.emergency_contact_phone" placeholder="请输入家长（紧急联系人）电话号码" />
          </u-form-item>

          <u-form-item label="班级 (1)">
            <u-input v-model="class_1_name" placeholder="请选择班级"  @click="handleTeaherClick(1)" />
            <u-icon name="arrow-down" color="#91959B" size="26"></u-icon>
          </u-form-item>
          <u-form-item label="班级 (2)">
          <u-input v-model="class_2_name" placeholder="请选择班级"  @click="handleTeaherClick(2)" />
          <u-icon name="arrow-down" color="#91959B" size="26"></u-icon>
        </u-form-item>
        <u-form-item label="班级 (3)">
          <u-input v-model="class_3_name" placeholder="请选择班级"  @click="handleTeaherClick(3)" />
          <u-icon name="arrow-down" color="#91959B" size="26"></u-icon>
        </u-form-item>

        </u-form>
        <view class="button submit" @click="submit">保存</view>
      </view>

      <u-action-sheet class="bao_max_height" cancelText="取消" :list="classList" v-model="showTeacher" @click="enterClass"></u-action-sheet>
    </view>
  </view>
</template>
<script>
import { addStudent } from '../../api/modules/student';
import { BASE_URL } from '../../api/config'
import { init } from '../../utils/getData';

export default {
  data() {
    return {
      sexList: [
        {
          name: '男',
          value: '0'
        },
        {
          name: '女',
          value: '1'
        },
        {
          name: '保密',
          value: '2'
        }
      ],
      sexMap: {
        '男': 0,
        '女': 1,
        '保密': 2,
      },
      stateList: [
        {
          name: '学习',
          value: '0'
        },
        {
          name: '休学',
          value: '1'
        },
        {
          name: '停学',
          value: '2'
        }
      ],
      stateMap: {
        '学习': 0,
        '休学': 1,
        '停学': 2,
      },
      form: {
        name: '',
        sex: '男', // 0: 男，1：女，2：保密
        status: '学习', // 0：学习，1：休学，2：停学
        student_number: '',
        integration: '',
        emergency_contact: '',
        emergency_contact_phone: '',
        avatar: '',
      },
      rules: {},
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
      token: uni.getStorageSync('token'),
      BASE_URL,
      fileList: [],
      class_1_name: '',
      class_2_name: '',
      class_3_name: '',
      activeClass: 1,
      showTeacher: false,
      classList: [],
    }
  },

  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  mounted() {
    this._getClass(getApp().globalData.glb_list.classList)
  },

  methods: {
    handleTeaherClick(index) {
      console.log('index', index)
      this.activeClass = index
      this.showTeacher = true
    },
    enterClass(e) {
      console.log(this.form['cid' + this.activeClass])
      console.log('e', e, this.classList[e].id, this.classList[e].name)
      this.form['cid' + this.activeClass] = this.classList[e].id
      this['class_' + this.activeClass + '_name'] = this.classList[e].name

      console.log('--', this.form)
    },
    _getClass(list) {
        this.classList = list.map((item) => ({ ...item, text: item.name }))
    },
    omRemove(index) { // 移除照片
			if (index === 0) {
				this.fileList = []
				this.form.avatar = ''
			}
		},
    onSuccess(data) {
      const res = JSON.parse(data.data)
      if (res.code == 201) {
        this.form.avatar = res.data.path
      } else {
        this.$refs.uUpload.clear()
        this.$u.toast('上传失败')
      }
    },
    submit() {
      let data = {
        ...this.form,
        sex: this.sexMap[this.form.sex],
        status: this.stateMap[this.form.status],
        sid: this.glbId,

      }
      this._addStudent(data)
    },

    _addStudent(data) {
      addStudent(data).then((res) => {
        if (res.code == 201) {
          this.$u.toast('添加成功')
          uni.navigateBack({
              delta: 1
          })
          init(); // 添加数据
          this.form = {
            name: '',
            sex: '男',
            status: '学习',
            student_number: '',
            integration: '',
            emergency_contact: '',
            emergency_contact_phone: '',
            avatar: ''
          }
        } else {
          this.$u.toast(res.message)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.touxiang-box {
  padding: 40rpx 0;
  font-size: 30rpx;
}

.touxiang {
  width: 150rpx !important;
  height: 150rpx !important;
  margin: auto;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 25rpx;
}

.touxiang image {
  width: 100%;
  height: 100%;
}

.form {
  background-color: #fff;
  padding: 0px 45rpx;
  overflow: hidden;
}

.bao_max_height {
  /deep/.uni-scroll-view-content {
    overflow: auto;
    max-height: 800rpx;
  }
}

.button {
  width: 100%;
  height: 88rpx;
  border-radius: 44rpx;
  margin: 80rpx 0 40rpx 0;
  background-color: #2979ff;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  line-height: 88rpx;
}
</style>
